a{
    text-decoration: none;
}
.userBackgroundImgCover{
    padding: 0;
    margin: 0;
    display: block;
    position: relative;
}
.userBackgroundImgCover img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    max-height: 30vh;
}
.userInforBox{
    position: relative;
    margin: 0 30px 24px;
}

.userInforBox .userInforAvaterBox{
    position: absolute;
    top: 0;
    left: 0;
    top:-32px
}
.userInforAvaterBox img{
    height: 64px;
    width: 64px;
    border-radius: 50%;
}
.userInforMainBox{
    border-left: 70px solid transparent;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}
.userInforHeader{
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
}
.userInforMainBox .userName{
    padding: 0 16px;
    line-height: 1.5;
    font-size: 18px;
    font-weight: 600;
}
.userInforMainBox .userSign{
    display: inline-block;
    padding: 0 16px;
    font-size: 10px;
    line-height: 2.2;
    color: #8590a6;
}
.userInforMainBox .actionBtn{
    padding: 8px 30px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 4px;
    margin-right: 10px;
    background: linear-gradient( 
30deg
 ,#3db5e4,#0084ff);
    color: #fff;
    cursor: pointer;
}
.userTabBox{
    margin: 10px 0 0 0 ;
    border-left: 10px solid transparent;
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-start;
}
.userTabBox ul{
    list-style-type: none;
    padding: 0;
    margin: 0;
}
.userTabBox ul li{
    display: inline-block;
    width: 58px;
    height: 42px;
    line-height: 42px;
    margin-right: 20px;
}
.userTabBox .tabButtion{
    display: block;
    width: 100%;
    height: 42px;
    text-align: center;
    color: #000;
    font-size: 16px;
    border-bottom: 3px solid transparent;
}
.userTabBox .tabButtion.check{
    color:#3884ff;
    border-bottom-color: #3884ff;
}
.userTabSearch{
    border-radius: 3px;
    color: #222;
    font-size: 12px;
    line-height: 22px;
    height: 22px;
    width: 125px;
    transition: all .4s ease;
    background: #fff;
    border: 1px solid #e8eaed;
    outline: 0;
    padding: 6px 12px;
}
.userTabSearch:focus{
    border-color: #58baff;
}
.onSearch{
    transition: opacity .5s;
    margin-left: 10px;
    min-width: 50px;
}
.simple-post-card {
    border-radius: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    margin-bottom: 20px;
    min-width: 160px;
    position: relative
}

.simple-post-card .colletionsFlag{
    position: absolute;
    top: 8px;
    left: 15px;
    z-index: 2;
}
.simple-post-card .colletionsFlag .number{
    font-size: 15px;
    padding: 5px 7px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-weight: 600;
    border-radius: 5px
}
.simple-post-card .post-card-wrap>a {
    display: block
}

.simple-post-card .post-card-wrap>a:hover .cover {
    opacity: .8
}

.simple-post-card .post-card-wrap>a:hover .Ctitle {
    color: #3884ff
}


.simple-post-card .post-card-wrap .post-card-content {
    position: relative;
    display: block;
    height: 140px;
    width: 100%;
    border-radius: 4px;
    overflow: hidden;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg)
}

.simple-post-card .post-card-wrap .post-card-content .cover {
    width: 100%;
    height: 100%;
    background: #f5f5f5;
    background-image: url();
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 4px;
    -webkit-transition: opacity .2s ease-in-out,background-image .2s ease-in-out,-webkit-transform .2s ease-in-out;
    transition: opacity .2s ease-in-out,background-image .2s ease-in-out,-webkit-transform .2s ease-in-out;
    transition: opacity .2s ease-in-out,transform .2s ease-in-out,background-image .2s ease-in-out;
    transition: opacity .2s ease-in-out,transform .2s ease-in-out,background-image .2s ease-in-out,-webkit-transform .2s ease-in-out
}

.simple-post-card .post-card-wrap .flag {
    position: absolute;
    right: 8px;
    top: 0px;
}

.simple-post-card .post-card-wrap .flag>* {
    display: inline-block
}

.simple-post-card .post-card-wrap .flag>*+* {
    margin-left: 4px
}

.simple-post-card .post-card-wrap .recommend {
    font-size: 13px;
    padding: 5px 9px;
    background: rgba(57, 89, 231, 0.9);
    color: #fff;
    font-weight: 600;
    border-radius: 3px
}
.simple-post-card .post-card-wrap .setTop{
    height: 30px;
    line-height: 30px;
    width: 30px;
    background: rgba(103,194,58,.9);
    border-top-right-radius: 4px;
    border-bottom-left-radius: 4px;
    color: #fff;
    cursor: pointer;
    text-align: center;
    font-size: 12px;
}
.simple-post-card .post-card-wrap .Ctitle {
    color: #333;
    font-size: 13px;
    margin: 8px 0;
    -webkit-transition: color .2s ease;
    transition: color .2s ease
}

.simple-post-card .post-card-wrap .status {
    padding-top: 2px;
    color: #999;
    font-size: 12px
}
.text-truncate {
    word-wrap: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden
}
.UCPfilesMian{
    padding: 13px;
}
.UCPfilesMian .sectionTitle{
    font-size: 25px;
    margin: 15px 10px;
}
.NMessage{
    padding: 13.1px;
    font-size: 14px;
    line-height: 1.46;
    color: #4a4a4a;
    word-wrap: break-word;
}
.uploadBg{
    position:absolute;
    right: 15px;
    top: 10px;
}
.settingImgWarp{
    cursor: pointer;
}
.settingImgAction{
    position:absolute;
    width: 100%;
    background-color: #fff;
    z-index: 2;
    box-shadow: -1px 2px 2px 0px rgb(18 18 18 / 10%);
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    animation: fade .5s  1;
}
@keyframes fade{
    from{opacity: 0;}
    to{opacity: 1;}
}
.settingImgAction .settingMessage{
    display: flex;
    flex-direction: column;
    margin-left: 20px;
    flex: 1;
}
.settingImgAction .settingMessage .settingTitile{
    font-size: 20px;
    color: #121212;
}
.settingImgAction .settingMessage .settingDescript{
    font-size: 13px;
    color: #8590a6;
}
.settingImgAction .settingBtnWarp{
    margin-right: 20px;
}
.pagination{
    width: 100%;
    display: flex;
    flex-direction: row;
    list-style: none;
}
.page-item{
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border: 1px solid #d9d9d9;
    color: #000;
    margin-right: 5px;
    transition: background .3s cubic-bezier(0.075, 0.82, 0.165, 1);
    border-radius: 3px;
    cursor: pointer;
    user-select: none;
}
.page-item:hover{
    background: #0084ff;
    color: #fff;
    border: 1px solid #fff;
}
.page-item.active{
    background: #0084ff;
    box-shadow: none;
    color: #fff;
    border: 1px solid #fff;
}
.loading{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 300px;
}
.checkBox_warp{
    position: relative;
  }
  .round{
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 50%;
    cursor: pointer;
    height: 28px;
    left: 0;
    position: absolute;
    top: 0;
    width: 28px;
  }
  
  .round:after {
    border: 2px solid #fff;
    border-top: none;
    border-right: none;
    content: "";
    height: 6px;
    left: 7px;
    opacity: 0;
    position: absolute;
    top: 8px;
    transform: rotate(-45deg);
    width: 12px;
  }
  
  .checkBox_warp input[type="checkbox"] {
    visibility: hidden;
  }
  
  .checkBox_warp
  input[type="checkbox"]:checked 
  +div{
    background-color: #66bb6a;
    border-color: #66bb6a;
  }
  
  .checkBox_warp
  input[type="checkbox"]:checked + div:after {
    opacity: 1;
  }
@media (min-width:900px){
    .userInforBox .userInforAvaterBox{
        top:-54px;

    }
    .userInforBox{
        position: relative;
        margin: 0 100px 24px;
    }
    .userInforAvaterBox img{
        height: 110px;
        width: 110px;
    }
    .userInforMainBox{
        border-left: 110px solid transparent;
    }
    .userInforMainBox .userName{
        font-size: 22px;
    }
    .userInforMainBox .userSign{
        font-size: 14px;
    }
    .userTabBox{
        margin: 10px 0 0 0 ;
        border-left: 215px solid transparent;
        flex-direction: row;
        align-items: center;
    }
    .uploadBg{
        right: 35px;
        top: 30px;
    }
}